<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet"
	href="${pageContext.request.contextPath }/css/stars.css">
<link rel="stylesheet"
	href="${pageContext.request.contextPath }/css/grade-style.css">
<link rel="stylesheet"
	href="${pageContext.request.contextPath }/css/bootstrap.min.css">
<link href="${pageContext.request.contextPath }/css/index.css"
	rel="stylesheet" type="text/css" />
<link rel="stylesheet"
	href="${pageContext.request.contextPath }/css/font-awesome.min.css">
<script src="${pageContext.request.contextPath }/js/jquery.min.js"></script>
<script
	src="${pageContext.request.contextPath }/js/jquery-1.12.0.min.js"></script>
<script src="${pageContext.request.contextPath }/js/comment.js"></script>
<title>Insert title here</title>
</head>
<body>
	<div class="login-bg">
		<div class="contain">
			<c:import url="header.jsp"></c:import>
			<div class="module form-module">
				<div class="toggle">Complaints</div>
				<div class="form">
					<div>
						<h2>
							<img src="images/mark.png" width="5%" height="5%"> Mark
						</h2>
					</div>
					<form action="grade" method="post">
						<div class="goods-comm">
							<div class="goods-comm-stars">
								<span class="star_l"><h5>Please give your grade for
										this ordering:</h5></span>
								<div id="rate-comm-1" class="rate-comm"></div>
							</div>
						</div>
					</form>
				</div>
				<div class="form l_text">
					<div>
						<h2>
							<img src="images/complain.png" width="8%" height="8%">
							Complaints
						</h2>
					</div>
					<label class="m_flo"></label>
					<form action="complain" method="post" id="complainform">
						<textarea name="complaints" form="complainform" class="text">Please input your complaints here...</textarea>
						<input type="submit" value="Submit">
					</form>
				</div>
			</div>
		</div>
	</div>
	<script>
		// Toggle Function: CSS style control
		$('.toggle').click(function() {
			// Switches the Icon
			if (this.innerHTML == "Mark") {
				this.innerHTML = "Complaints";
			} else if (this.innerHTML == "Complaints") {
				this.innerHTML = "Mark";
			}

			// Switches the forms
			$('.form').animate({
				height : "toggle",
				'padding-top' : 'toggle',
				'padding-bottom' : 'toggle',
				opacity : "toggle"
			}, "slow");
		});
	</script>
</body>
</html>